<template>
  <a-card :bordered="false">
    <div>
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>

      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel"
      >
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload> -->
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
        </a-dropdown>
      </div>
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <div style="display: flex">
            <a-form-item label="付款状态" style="margin-right: 10px">
              <a-select
                v-model="queryParam.payStatus"
                style="width: 120px"
                :options="options"
                allowClear
                placeholder="请选择"
                @change="searchQuery"
              />
            </a-form-item>
            <a-form-item label="城市服务商" style="margin-right: 10px" v-has="'orderId:select'">
              <serveSelect @selectClick="selectClick" :value="queryParam.agencyCode"></serveSelect>
            </a-form-item>
            <a-form-item label="用户编号" style="margin-right: 10px">
              <a-input placeholder="请输入用户编号" v-model="queryParam.userId" @pressEnter="searchQuery"></a-input>
            </a-form-item>
            <a-form-item label="用户手机号" style="margin-right: 10px">
              <a-input
                placeholder="请输入用户手机号"
                v-model="queryParam.userPhone"
                @pressEnter="searchQuery"
              ></a-input>
            </a-form-item>
            <a-form-item label="下单手机号" style="margin-right: 10px">
              <a-input placeholder="请输入下单手机号" v-model="queryParam.phone" @pressEnter="searchQuery"></a-input>
            </a-form-item>
            <a-form-item label="下单用户" style="margin-right: 10px">
              <a-input placeholder="请输入下单用户" v-model="queryParam.name" @pressEnter="searchQuery"></a-input>
            </a-form-item>
            <a-form-item label="服务技师" style="margin-right: 10px">
              <a-input placeholder="请输入服务技师" v-model="queryParam.coachName" @pressEnter="searchQuery"></a-input>
            </a-form-item>
            <a-form-item label="订单号" style="margin-right: 10px">
              <a-input placeholder="请输入订单号" v-model="queryParam.orderNo" @pressEnter="searchQuery"></a-input>
            </a-form-item>
          </div>
          <div style="display: flex">
            <a-form-item label="支付开始时间" style="margin-right: 10px">
              <a-date-picker v-model="queryParam.startPayTime" :valueFormat="'YYYY-MM-DD'" @change="startPayChange" />
            </a-form-item>
            <a-form-item label="支付结束时间" style="margin-right: 10px">
              <a-date-picker
                v-model="queryParam.endPayTime"
                :valueFormat="'YYYY-MM-DD'"
                @change="endPayChange"
                :disabled-date="disabledDates"
              />
            </a-form-item>
            <a-form-item label="下单开始时间" style="margin-right: 10px">
              <a-date-picker v-model="queryParam.startTime" :valueFormat="'YYYY-MM-DD'" @change="startChange" />
            </a-form-item>
            <a-form-item label="下单结束时间" style="margin-right: 10px">
              <a-date-picker
                v-model="queryParam.endTime"
                :valueFormat="'YYYY-MM-DD'"
                @change="endChange"
                :disabled-date="disabledDate"
              />
            </a-form-item>
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </div>
        </a-form>
      </div>
    </div>
    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <span style="margin-right: 20px"
          >订单金额共计：<span style="font-size: 16px; color: red"
            >{{ parseFloat(formData.totalAmount || 0).toFixed(2) }} </span
          >元</span
        >
        <span style="margin-right: 20px"
          >订单数量：<span style="font-size: 16px; color: red">{{ formData.orderNum }} </span>单</span>

        <span style="margin-right: 20px"
        >订单退款金额：<span style="font-size: 16px; color: red"
        >{{ parseFloat(formData.orderRefundAmount || 0).toFixed(2) }} </span
        >元</span>

        <span style="margin-right: 20px"
          >车费共计：<span style="font-size: 16px; color: red"
            >{{ parseFloat(formData.fareAmount || 0).toFixed(2) }} </span
          >元</span
        >
        <span style="margin-right: 20px"
          >优惠总金额：<span style="font-size: 16px; color: red"
            >{{ parseFloat(formData.preferentialAmount || 0).toFixed(2) }} </span
          >元</span
        >

      </div>
    </div>
    <a-button type="primary" icon="download" @click="handleExportXls('订单表')">导出</a-button>
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :scroll="{ x: 'auto' }"
      class="j-table-force-nowrap"
      @change="handleTableChange"
    >
      <!-- 号码开关 -->
      <template slot="realPhoneopen" slot-scope="text, record">
        <div class="anty-img-wrap">
          <a-switch
            default-checked
            :checked="record.realPhoneOpen == 1 ? true : false"
            @change="isOpenChange(record)"
          />
        </div>
      </template>

      <!-- 客人 -->
<!--      <template slot="name" slot-scope="text, record">-->
<!--        <div class="anty-img-wrap">-->
<!--          {{ record.name }} {{ record.newSign }}-->
<!--        </div>-->
<!--      </template>-->

      <template slot="name" slot-scope="text, record">
        <div class="anty-img-wrap">
    <span :class="{'text-green': record.newSign === 0, 'text-red': record.newSign === 1}">
      {{ record.name }}
    </span>
          <span class="sign-text" :class="{'text-green': record.newSign === 0, 'text-red': record.newSign === 1}">
      {{ record.newSign === 0 ? '(老客)' : '(新客)' }}
    </span>
        </div>
      </template>

      <template slot="addUpToPayTotal" slot-scope="text, record">
        <div>
          服务金额：<span class="font-amount">{{ record.serviceAmount }}</span
          >元
        </div>
        <div>
          技师车费：<span class="font-amount">{{ record.carAmount }}</span
          >元
        </div>
        <div>
          实付金额：<span class="font-amount">{{ record.totalAmount }}</span
          >元
        </div>
        <div>
          优惠金额：<span class="font-amount">{{ record.preferentialAmount }}</span
          >元
        </div>
        <div>
          合计已付：<span class="font-amount">{{ record.addUpToPayTotal }}</span
          >元
        </div>
        <div v-if="record.payStatus === 4">
          退款金额：<span class="font-amount">{{ record.outAmount }}</span
          >元
        </div>
      </template>
      <!-- 审核状态 -->
      <template slot="payStatus" slot-scope="text, record">
        <a-tag :color="options[record.payStatus].color"> {{ options[record.payStatus].label }} </a-tag>
      </template>
      <span slot="action" slot-scope="text, record">
        <a @click.stop="clicks(record)" v-has="'serve:detail'">详情</a>
        <a-divider type="vertical" />

        <a @click.stop="handleEdit(record)" v-if="record.payStatus == 3">审核</a>
        <a-divider type="vertical" v-if="record.payStatus == 1 && record.serverStatus != 5" v-has="'serve:cut'" />

        <a @click.stop="finishRefund(record)" v-if="record.payStatus == 1 && record.refundSign == 1" v-has="'serve:cut'">退款</a>

        <a
          @click.stop="genhuanjishi(record)"
          v-if="record.payStatus == 1 && record.serverStatus != 5"
          v-has="'serve:cut'"
          >更换技师</a
        >

        <a-divider
          type="vertical"
          v-if="(record.payStatus == 1 && record.serverStatus == 4) || record.serverStatus == 6"
          v-has="'serve:adddata'"
        />
        <a
          @click.stop="clickAdd(record)"
          v-if="(record.payStatus == 1 && record.serverStatus == 4) || record.serverStatus == 6"
          v-has="'serve:adddata'"
          >人工加钟</a
        >

        <a-divider type="vertical" v-if="record.payStatus === 1 && record.serverStatus === 0" />
        <a-popconfirm title="确定帮技师接单吗？" v-has="'order:takeOrders'" @confirm="() => takeOrders(record.id)">
          <a v-if="record.payStatus === 1 && record.serverStatus === 0">人工接单</a>
        </a-popconfirm>
      </span>
    </a-table>
    <!-- table区域-end -->
    <!-- 表单区域 -->


    <xhdjOrderInfo-modal ref="modalForm" @ok="modalFormOk"></xhdjOrderInfo-modal>
    <XhdjOrderInfoDialog ref="dialogForm"></XhdjOrderInfoDialog>
    <Xhdjgenhuanjishi ref="gengai"></Xhdjgenhuanjishi>
    <XhdjOrderInfoFinishRefund  ref="finishRefund"></XhdjOrderInfoFinishRefund>
    <XhdjOrderInfoAdd ref="modalAdd" @ok="modalFormOk"></XhdjOrderInfoAdd>

  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import XhdjOrderInfoModal from './modules/XhdjOrderInfoModal'
import Xhdjgenhuanjishi from './modules/Xhdjgenhuanjishi.vue'
import XhdjOrderInfoAdd from './modules/XhdjOrderInfoAdd.vue'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import XhdjOrderInfoFinishRefund from './modules/XhdjOrderInfoFinishRefund.vue'
// import XhdjOrderInfoDialog from './modules/XhdjOrderInfoDialog.vue'
import XhdjOrderInfoDialog from '@/views/business/xhdjOrderInfo/modules/XhdjOrderInfoDialog.vue'
import { getAction, getRealPhoneopen } from '@/api/manage'
import { colAuthFilterJEditableTable } from '@/utils/authFilter'
import { USER_AUTH, SYS_BUTTON_AUTH } from '@/store/mutation-types'
import serveSelect from '@/components/serveSelect.vue'
export default {
  name: 'XhdjOrderInfoList',
  mixins: [JeecgListMixin],
  components: {
    XhdjOrderInfoModal,
    XhdjOrderInfoDialog,
    serveSelect,
    Xhdjgenhuanjishi,
    XhdjOrderInfoAdd,
    XhdjOrderInfoFinishRefund
  },
  data () {
    return {
      description: '订单表管理页面',
      options: [
        { label: '待支付', value: '0', color: 'orange' },
        { label: '已支付', value: '1', color: 'green' },
        { label: '已取消', value: '2', color: '#999' },
        { label: '退款中', value: '3', color: 'orange' },
        { label: '已退款', value: '4', color: 'red' }
      ],
      typeW: 2,
      formData: {},
      // 表头
      columns: [
        {
          title: '城市服务商名称',
          align: 'center',
          dataIndex: 'agencyName'
        },
        {
          title: '订单编号',
          align: 'center',
          dataIndex: 'orderNo'
        },
        {
          title: '用户编号',
          align: 'center',
          dataIndex: 'userId'
        },
        {
          title: '用户手机号',
          align: 'center',
          dataIndex: 'userPhone'
        },
        {
          title: '订单ID',
          align: 'center',
          dataIndex: 'id'
        },
        {
          title: '子订单ID',
          align: 'center',
          dataIndex: 'sonOrderIds',
          customCell: (record, index) => {
            return {
              style: {
                'background-color': 'customerName'
              },
              on: {
                click: () => {
                  let a = this.userAuthList.filter(res => res.action == 'serve:detail')
                  if (a && a.length > 0) {
                    this.$refs.dialogForm.edit(record)
                    this.$refs.dialogForm.title = '订单详情'
                    this.$refs.dialogForm.disableSubmit = false
                  }
                }
              }
            }
          }
        },
        {
          title: '支付状态',
          align: 'center',
          dataIndex: 'payStatus',
          scopedSlots: { customRender: 'payStatus' }
        },
        {
          title: '订单服务状态',
          align: 'center',
          dataIndex: 'serverStatus',
          customRender: (text, record) => {
            switch (record.serverStatus) {
              case 0:
                return '待接单'
                break
              case 1:
                return '已接单'
                break
              case 2:
                return '拒绝接单'
                break
              case 3:
                return '已到达'
                break
              case 4:
                return '服务中'
                break
              case 5:
                return '服务结束'
                break
              case 6:
                return '加钟中'
                break
              case 7:
                return '技师出发'
                break
            }
          }
        },
        {
          title: '支付信息',
          dataIndex: 'addUpToPayTotal',
          width: 185,
          scopedSlots: { customRender: 'addUpToPayTotal' }
        },
        {
          title: '支付类型',
          align: 'center',
          dataIndex: 'payType',
          customRender: (text, record) => {
            switch (record.payType) {
              case 1:
                return '会员余额'
                break
              case 2:
                return '支付宝'
                break
              case 3:
                return '微信APP(商户备用)'
                break
              case 4:
                return '微信公众号(商户备用)'
                break
              case 5:
                return '微信公众号(商户备用)'
                break
              case 6:
                return '微信公众号(商户备用)'
                break
              case 7:
                return '微信公众号(商户1674799970)'
                break
            }
          }
        },
        // {
        //   title: '下单用户',
        //   align: 'center',
        //   dataIndex: 'name'
        // },
        {
          title: '下单用户',
          align: 'center',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        },

        {
          title: '下单手机号',
          align: 'center',
          dataIndex: 'phone'
        },
        {
          title: '支付时间',
          align: 'center',
          dataIndex: 'payTime'
        },
        {
          title: '技师名字',
          align: 'center',
          dataIndex: 'coachName'
        },
        {
          title: '真实号码开关',
          align: 'center',
          dataIndex: 'realPhoneopen',
          scopedSlots: { customRender: 'realPhoneopen' }
        },
        {
          title: '预约时间',
          align: 'center',
          dataIndex: 'makeTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ],
      userAuthList: [],
      url: {
        list: '/order/xhdjAppCoachOrder/backList',
        listes: '/order/xhdjAppCoachOrder/backOrderStatisticsNew',
        delete: '/xhdjOrderInfo/delete',
        deleteBatch: '/xhdjOrderInfo/deleteBatch',
        exportXlsUrl: '/order/xhdjAppCoachOrder/orderExport',
        importExcelUrl: 'xhdjOrderInfo/importExcel',
        takeOrders: '/order/xhdjAppCoachOrder/takeOrders'
      }
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  created () {
    this.init()
    this.userAuthList = JSON.parse(sessionStorage.getItem(USER_AUTH) || '[]')
    this.columns = colAuthFilterJEditableTable(this.columns, 'cc:main:user:formlist:sonOrderIds')
  },
  methods: {
    // 更换技师
    genhuanjishi (record) {
      console.log(record)
      this.$refs.gengai.edit(record)
      this.$refs.gengai.title = '更换技师'
    },

    // 退款
    finishRefund (record) {
      console.log(record)
      this.$refs.finishRefund.edit(record)
      this.$refs.finishRefund.title = '退款'
    },


    takeOrders (id) {
      getAction(this.url.takeOrders, { id }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    // 真实号码状态修改
    async isOpenChange (item) {
      let state = 0
      if (item.realPhoneOpen == 0) {
        state = 1
      }

      const res = await getRealPhoneopen({
        id: item.id,
        realPhoneOpen: state
      })

      if (res.code == 200) {
        this.loadData()
        // item.realPhoneOpen = !item.realPhoneOpen
      }

      console.log(res)
    },

    selectClick (value) {
      this.queryParam.agencyCode = value
      this.searchQuery()
    },
    clicks (record, index) {
      this.$refs.dialogForm.edit(record)
      this.$refs.dialogForm.title = '订单详情'
      this.$refs.dialogForm.disableSubmit = false
    },
    startChange (value) {
      if (value) {
        this.queryParam.startTime = value + ' 00:00:00'
      } else {
        this.queryParam.startTime = value
      }
    },
    endChange (value) {
      if (value) {
        this.queryParam.endTime = value + ' 23:59:59'
      } else {
        this.queryParam.endTime = value
      }
    },
    startPayChange (value) {
      if (value) {
        this.queryParam.startPayTime = value + ' 00:00:00'
      } else {
        this.queryParam.startPayTime = value
      }
    },
    endPayChange (value) {
      if (value) {
        this.queryParam.endPayTime = value + ' 23:59:59'
      } else {
        this.queryParam.endPayTime = value
      }
    },
    disabledDate (time) {
      return new Date(time).getTime() < new Date(this.queryParam.startTime).getTime()
    },
    disabledDates (time) {
      return new Date(time).getTime() < new Date(this.queryParam.startPayTime).getTime()
    },
    init () {
      var params = this.getQueryParams() //查询条件
      getAction(this.url.listes, params).then(res => {
        if (res.code === 200) {
          this.formData = res.result
        }
      })
    },
    clickAdd (record) {
      console.log(record)
      this.$refs.modalAdd.edit(record)
      this.$refs.modalAdd.title = '人工加钟'
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.font-amount {
  color: red;
  font-size: 16px;
}

.text-green {
  color: red; /* 老客户绿色 */
}
.text-red {
  color: green ; /* 新客户红色 */
}
.sign-text {
  margin-left: 8px; /* 根据需要调整间距 */
}
</style>
